<template>
	<view class="observe-cell">
		<view class="left-content" style="">
			<view class="avatar inline">
				<image class="img" :src="item.imageUrl" mode="aspectFill" @click="onClickKidInfo(item)"
					v-if="item.imageUrl" />
				<image class="img icon-default-avatar" mode="aspectFill" @click="onClickKidInfo(item)" v-else />
			</view>
		</view>
		<view class="right-content" style="margin: 0 20rpx; ">
			<view class="listTop" style="">
				<view class="" style="display: flex;justify-content: center;">
					<span class="name f32 bold">{{ item.name==null?"无名":item.name }}</span>
				</view>
				<view class="listRight" style="margin-right: 10rpx;" v-if="is_edit">
					<button class="share" plain open-type="share" data-name="shareBtn" @click="onShareClick(item)">
						<view class="icon-share" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"></view>
						分享
					</button>
				</view>
			</view>

			<view class="content"
				:class="{spring:data.season==1,summer:data.season==2,autumn:data.season==3,winter:data.season==4}">
				<view class="mark"
					:class="{spring:data.season==1,summer:data.season==2,autumn:data.season==3,winter:data.season==4}">
				</view>

				<view class="f28">
					<!-- 学期信息 -->
					<view style="font-size: 28rpx; color: #3A3D4B;">
						{{item.startTime}}-{{item.endTime}}
					</view>
					<!-- 观察文字 -->
					<view
						style="margin-top: 10rpx; color: #3A3D4B;width: calc(100vw - 200rpx); word-wrap: break-word; ">
						{{ item.content }}
					</view>
					<!-- 观察图片或者视频 -->
					<view class="image" v-if="item.imagesList && item.imagesList.length <= 1">
						<view v-for="(imgs,imgIdx) in item.imagesList">
							<video v-if="isVideoUrl(imgs.url)" :src="imgs.url"></video>
							<image v-else :src="imgs.url" mode="heightFix" :key="imgIdx"
								@click="lookImg([item.imagesList,imgIdx])" />
						</view>
					</view>
					<view class="image" v-else>
						<uni-grid :column="3" :showBorder="false">
							<uni-grid-item v-for="(ele, row) in item.imagesList">
								<view class="" style="padding: 2px;;height: 100%;width: 100%;">
									<image style="width: 100%; height: 100%;" mode="aspectFill" :src="ele.url"
										@click="lookImg([item.imagesList, row])">
									</image>
								</view>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
				<view style="margin: 10rpx 0rpx;  display: flex; align-items: center;">
					<span class="f24 time">{{ formatDateYMDHMS(item.createTime) }}</span>
					<span class="delete" @click="handleDelete(item.id, idx)" style="display: flex; align-items: center;"
						v-if="is_edit">
						<image class="icon-delete"></image>
					</span>
					<span class="edit" @click="handleEditObserve(item)" style="display: flex; align-items: center;"
						v-if="is_edit">
						<image class="icon-edit"></image>
					</span>
				</view>

				<view class="footer-content" v-if="item.fileUrl">
					<view class="icon-word" style="width: 30rpx; height: 30rpx; margin-right: 10rpx;"
						@click="copyBtn(item)">
					</view>
					<view class="" style="white-space: nowrap;">学期评价文件:</view>
					<view class="" style="display: flex; align-items: center; justify-content: flex-start; "
						@click="copyBtn(item)">
						<view class="text"
							style="white-space: nowrap;max-width: 300rpx; overflow: hidden;text-overflow: ellipsis;">
							{{item.fileUrl}}
						</view>
						<view class="icon-copy icon"></view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		formatDateYMDHMS
	} from '@/utils/util.js'
	export default {
		name: "rf-evalCell",
		props: {
			is_edit: { // 是否可编辑，分享时不可编辑
				type: Boolean,
				required: false,
				default: true
			},
			data: {
				required: true,
			},
			imageUrl: {
				type: String,
				required: false,
				default: ""
			},
			name: {
				type: String,
				required: false,
				default: ""
			},
			remark: {
				type: String,
				required: false,
				default: ""
			},
			confirmText: {
				type: String,
				required: false,
				default: "确定"
			}
		},
		data() {
			return {
				item: this.data,

				observe: "", // 分享传参
				shareParams: {
					name: "",
					homePhoto: "",
				}
			};
		},
		beforeMount() {
			console.log("-----------------------beforeMount--------------------------" + this.data);
			// this.shareParams.name = this.data.name
			// if (this.data.imagesList && this.data.imagesList[0].url) {
			// 	this.shareParams.homePhoto = this.data.imagesList[0].url
			// } else {
			// 	this.shareParams.homePhoto = this.data.imageUrl
			// }

			// 	homePhoto: "https://nobo-ai.oss-cn-beijing.aliyuncs.com/33763501/5b90f98f-5d58-43af-9493-c59605c95cbd.jpg",
			// }

		},

		watch: {

			data(newVal, oldVal) {
				console.log("-----------------------oldVal---------------------------");
				this.item = newVal;
				// this.shareParams.name = newVal.name
				// this.shareParams.homePhoto = newVal.name
				// 	homePhoto: "https://nobo-ai.oss-cn-beijing.aliyuncs.com/33763501/5b90f98f-5d58-43af-9493-c59605c95cbd.jpg",

			},
			// deep: true // 如果需要深度监听对象或数组类型的props，请设置deep为true
		},
		/**
		 * 用户点击右上角分享
		 */
		// onShareAppMessage: function(res) {
		// 	console.log(res);
		// 	console.log("用户点击右上角分享: " + JSON.stringify(res));
		// 	if (res.from === 'button') {
		// 		return {
		// 			title: this.observe.name + "小朋友的观察",
		// 			desc: this.observe.content,
		// 			path: "/pages-sub/share/share?observeid=" + this.observe.id,
		// 			imageUrl: this.observe.imagesList[0].url, //数据返回的图片数据
		// 			success: function(res) {
		// 				// 转发成功
		// 				console.log(res)
		// 			},
		// 			fail: function(res) {
		// 				// 转发失败
		// 				console.log(res)
		// 			}
		// 		}
		// 	} else { //用户点击右上角3个点分享（小程序端）
		// 		var shareId = this.userInfo.id;
		// 		return {
		// 			title: "邀请好友，获VIP特权",
		// 			path: '/pages/home/home?shareId=' + shareId,
		// 			imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
		// 			success: function(res) {
		// 				// 转发成功
		// 				console.log(res)
		// 			},
		// 			fail: function(res) {
		// 				// 转发失败
		// 				console.log(res)
		// 			}
		// 		}
		// 		// return {
		// 		// 	title: '观察',
		// 		// 	path: "/pages-sub/share/share",
		// 		// 	// imageUrl: this.observe.imagesList[0], //数据返回的图片数据
		// 		// 	success: function(res) {
		// 		// 		// 转发成功
		// 		// 		console.log(res)
		// 		// 	},
		// 		// 	fail: function(res) {
		// 		// 		// 转发失败
		// 		// 		console.log(res)
		// 		// 	}
		// 		// }
		// 	}
		// },
		methods: {
			formatDateYMDHMS(dateStr) {
				return formatDateYMDHMS(dateStr)
			},
			// 点击头像 查看孩子档案
			onClickKidInfo(event) {
				console.log("------------------------------------");
				console.log("event: " + JSON.stringify(event));
				if (event.status == 0) {
					// status:0/是，1/否。 是否自己创建的孩子， 不是不能进入详情。
					uni.navigateTo({
						url: '/pages-sub/childFile/childFile?childid=' + event.childId
					});
				}
			},
			// 分享
			onShareClick(item) {
				var params = this.deepClone(item)

				params.name = params.name + "的学期评价";
				params.path = "/pages-sub/share/shareEval?evalid=" + params.id;

				uni.$emit('shareParams', params)

			},

			deepClone(obj) {
				if (obj === null || typeof obj !== 'object') {
					return obj;
				}

				let clone = Array.isArray(obj) ? [] : {};

				for (let key in obj) {
					if (obj.hasOwnProperty(key)) {
						clone[key] = this.deepClone(obj[key]);
					}
				}

				return clone;
			},
			// 判断地址是否为视频地址
			isVideoUrl(url) {
				// 视频常见后缀名列表
				const videoExtensions = ['mp4', 'flv', 'avi', 'wmv', 'mov', 'mkv', 'rm', 'rmvb'];

				// 获取url的最后一部分（通常为文件名+后缀）
				const fileName = url.split('/').pop();

				// 分离出文件后缀名
				const fileExtension = fileName.split('.').pop().toLowerCase();

				// 判断后缀名是否在视频格式列表中
				return videoExtensions.includes(fileExtension);
			},
			// 预览图片
			lookImg: function(val) {
				const urls = val[0].map(item => {
					return item.url
				})
				const current = val[1]
				console.log(urls);
				console.log(current);

				uni.previewImage({
					urls,
					current
				})
			},
			copyBtn(item) {
				let _that = this;
				wx.setClipboardData({
					//复制文本
					data: item.fileUrl,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							mask: 'true' //是否设置点击蒙版，防止点击穿透
						});
					}
				});
			},

			// 观察分析关闭事件
			handleAnalyzeClose(index) {
				console.log("----------------------");
				console.log(this.item);
				console.log(this.data);
				let _that = this

				clearTimeout(this.timer)
				this.timer = null
				this.timer = setTimeout(() => {
					_that.item.expanded = false;
					_that.$forceUpdate();
				}, 300);
			},
			// 观赏分析展开事件
			handleAnalyzeOpen(index) {
				this.item.expanded = true;
				this.$forceUpdate();
			},
			openShowAll() {
				this.$emit("showAll", this.item.list)
			},
			handleDelete(id, idx) {
				this.$emit("del", id, idx)
			},
			handleEditObserve() {
				this.$emit("edit", this.item)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.observe-cell {
		display: flex;
		padding: 20rpx;

		.right-content {
			flex: 1;

			.content {
				// background-color: #F7F9FA;

				padding: 20rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
				position: relative;
				width: calc(100vw - 150rpx);

				&.spring {
					background-color: #F0FCF2;
				}

				// &.summer {
				// 	background-color: #F0FCF2;
				// }

				&.autumn {
					background-color: #FFFAEE;
				}

				// &.winter {
				// 	background-color: #F0FCF2;
				// }

				.mark {
					width: 138rpx;
					height: 50rpx;
					position: absolute;
					right: 20rpx;
					top: -8rpx;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;

					&.spring {
						background-image: url("");
					}

					&.summer {
						background-image: url("");
					}

					&.autumn {
						background-image: url("");
					}

					&.winter {
						background-image: url("");
					}

				}

				.footer-content {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 20rpx;

					.icon {
						width: 30rpx;
						height: 30rpx;
					}

				}

			}
		}
	}
</style>